<template>
    <div class="right-content">
      <!-- 头部查询区域 -->
        <el-form :inline="true" :model="othersData" class="demo-form-inline">
          <div style="display:inline-block">
            <el-form-item>
              <el-select v-model="othersData.region" placeholder="请选择" style="width:120px">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="othersData.name" placeholder="输入关键词"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getothersDataList()">查询</el-button>
            </el-form-item>
          </div>
          <el-form-item style="right: 100px">
            <el-button type="primary" @click="onSubmit">导入</el-button>
            <el-button type="primary" @click="onSubmit">导出</el-button>
          </el-form-item>
        </el-form>
        <!-- 内容区域 -->
        <el-table
          ref="multipleTable"
          border
          :data="currentData"
          :header-cell-style="headerStyle"
          :cell-style="cellStyle"
          @selection-change="handleSelectionChange"
        >
          <!-- 复选框 -->
          <el-table-column
            type="selection"
            width="50"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            type="index"
            width="80"
            label="序号"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="workId"
            width="150"
            label="员工工号"
            header-align="center"
            align="center">
            </el-table-column>
          <el-table-column
            prop="name"
            width="150"
            label="姓名"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            width="80"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="department.name"
            width="150"
            label="所属部门"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="position.name"
            width="150"
            label="员工职务"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="电话号码"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="联系地址"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="ShareCustomer(scope.row)" icon="el-icon-share"></el-button>
              <el-button type="primary" size="mini" @click="addOrUpdataHandle(scope.row)" icon="el-icon-user"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px; margin-right: 20px">
          <el-pagination
            align="right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 8, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
        <!-- 弹窗，新增或修改 -->
        <others-add-or-update v-if="OthersAddOrUpdateVisible" ref="OthersAddOrUpdate" @refreshDataList="getothersDataList"></others-add-or-update>
        <book-share-customer v-if="BookShareCustomerVisible" ref="BookShareCustomer"></book-share-customer>
    </div>
</template>

<script>
import OthersAddOrUpdate from '../ProFile/Others-add-or-update.vue'
import BookShareCustomer from './BookShareCustomer.vue'
export default {
  name: 'AddressBook',
  data() {
    return {
      tableData: [], // 表格中的员工数据
      currentData: [], // 当前页面的所有员工的数据
      multipleSelection: [], // 选定的多个复选框对象
      options: [{
        value: '员工工号',
        label: '员工工号'
      }, {
        value: '姓名',
        label: '姓名'
      }, {
        value: '所属部门',
        label: '所属部门'
      }, {
        value: '员工职务',
        label: '员工职务'
      }, {
        value: '手机号码',
        label: '手机号码'
      }],
      value: '',
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页选定的显示条数
      othersData: { // 想要查询的员工数据
        name: '',
        region: ''
      },
      OthersAddOrUpdateVisible: false,
      BookShareCustomerVisible: false
    }
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    OthersAddOrUpdate,
    // eslint-disable-next-line vue/no-unused-components
    BookShareCustomer
  },
  // 生命周期
  mounted() {
    this.getothersDataList()
  },
  watch: {
    tableData(newValue, oldValue) {
      this.currentData = newValue.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    CurrentPage(newValue, oldValue) {
      this.currentPage = this.tableData.slice((newValue - 1) * this.pageSize, newValue * this.pageSize)
    }
  },
  methods: {
    // 选择每页行数
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
    },
    // 选择页码
    handleCurrentChange(val) {
      this.currentPage = val
    },
    // 表格行高
    cellStyle() {
      return {
        'font-size': '14px',
        height: '45px',
        padding: '0'
      }
    },
    // 表头行高
    headerStyle() {
      return {
        height: '55px'
      }
    },
    // 选择的复选框的数量
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取数据列表
    getothersDataList() {
      this.getRequest('admin/emp').then((resp) => {
        if (resp) {
          console.log(resp)
          this.tableData = resp.data
          console.log(this.tableData)
        } else {
          console.log('失败')
        }
      })
    },
    // 详情
    addOrUpdataHandle(data) {
      this.OthersAddOrUpdateVisible = true // 显示弹出框
      this.$nextTick(() => {
        this.$refs.OthersAddOrUpdate.init(data)
      })
    },
    // 共享客户文件夹
    ShareCustomer(data) {
      // eslint-disable-next-line no-unused-expressions
      this.BookShareCustomerVisible = true
      this.$nextTick(() => {
        this.$refs.BookShareCustomer.init(data)
      })
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
.demo-form-inline{
  width: 97%;
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  margin-bottom: 0px;
}
.el-table{
  width: 97%;
  margin: 0px auto
}
</style>
